<template>
	<view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt"><view class="qiun-title-dot-light">实时数据</view></view>
			<view class="charts-box">
			  <qiun-data-charts type="area" :opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="chartsDataArea2"/>
			</view>
		</view>	
		<qiun-title-bar title="其他仪表盘"/>
		<view class="charts-box">
		  <qiun-data-charts type="gauge" :opts="{title:{name:'实时湿度',offsetY:0},subtitle:{name:null,offsetY:0},extra:{gauge:{type:'progress',width:20,splitLine:{fixRadius:-10,width:15,},}}}" :chartData="chartsDataGauge"/>
		</view>
	</view>
</template>

<script>
var data_tem=[];

export default {
	data() {
		return {
			chartsDataArea2:{},
		};
	},
	onLoad() {
	this.showColumn1(data_tem)
	this.showColumn2(data_tem)
    //模拟从服务器获取数据
	setInterval(this.getServerData,5000);
	},
  methods: {
    getServerData() {
		setInterval(function() {
			for(var i = 0;i < 7;i++){
			  uni.request({
				url: 'http://192.168.246.82:8083/data/getlight',
				success:function(res) {
					console.log(res.data.data.data);
					console.log('进入3');
					data_tem.push(res.data.data.data);
				}
			  })
			}
		},10000);

		console.log('jinr')
		console.log(data_tem)
		this.showColumn1(data_tem)
		this.showColumn2((data_tem[data_tem.length-1]*0.01))
		},
		showColumn1(data1){
			this.chartsDataArea2={
			"categories": ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri","Sat"],
			"series": [{
				"name": "光照度",
				"data": data1.reverse(),
				
			}]
			}
		},
		showColumn2(data2){
			this.chartsDataGauge={
				"categories":[{
					"value":0.9,
					"color":"#1890ff"
				},
				{
					"value": 0.8,
					"color": "#2fc25b"
				}, {
					"value": 1,
					"color": "#f04864"
				}],
				"series": [{
					"name": "完成率",
					"data": data2
					
				}]
			}
		}
	}
};
</script>
<style>
.qiun-bg-white {
		background-color: #1477da;
		font-size: calc(40rpx);
		color: #ffffff;
		width: 100%;
		text-align: left;
		padding: 15rpx;
		padding-top: 50rpx;
		padding-left: 70rpx;
}
</style>
